@charset "utf-8";

#home {
  width: 100%;
  height: 100%;
  padding-top: 50px;

  .wrap {
    background-color: #ebebeb;
    width: 100%;
    height: 100%;
    //轮播
    .shuffling {
      width: 100%;
      height: 56vw;
      position: relative;

      .mint-swipe {
        width: 100%;
        vertical-align: top;
        position: absolute;

        .mint-swipe-items-wrap {
          width: 100vw;

          img {
            width: 100%;
            vertical-align: top;
          }
        }

        .mint-swipe-indicators {
          position: absolute;
          bottom: 17px;
          left: 50%;
        }
      }
    }
    //轮播
    //电影
    .movie_box {
      width: 100%;

      ul {
        padding-top: 18px;

        li {
          margin: 0 17px 17px;
          background-color: #f9f9f9;
          -webkit-box-shadow: 0.5px 0.5px 1px #a8a8a8;
          -moz-box-shadow: 0.5px 0.5px 1px #a8a8a8;
          box-shadow: 0.5px 0.5px 1px #a8a8a8;
          cursor: pointer;

          .movie {
            font-size: 0;
            position: relative;

            img {
              width: 100%;
            }

            .movie_img {
              width: 100%;

              .movie_title {
                height: 50px;
                width: 100%;
                background-color: white;
                font-size: 14px;

                .title {
                  padding-top: 10px;
                  padding-left: 10px;
                  text-align: left;
                }

                .title_data {
                  text-align: left;
                  padding-left: 10px;

                  span {
                    color: #9a9a9a;
                  }
                }
              }
            }

            .score {
              position: absolute;
              bottom: 0;
              right: 0;
              height: 50px;
              width: 50px;

              span {
                line-height: 50px;
                text-align: center;
                color: #f78360;
                font-size: 18px;
              }
            }
          }
        }
      }
    }
    //电影
    //更多
    .more_button {
      width: 42vw;
      height: 30px;
      border: 1px solid #aaa;
      border-radius: 15px;
      margin: 10px auto 30px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
      cursor: pointer;

      a {
        color: #616161;
      }
    }
    //更多
    .coming {
      box-sizing: border-box;

      .dividing-line {
        position: relative;
        margin-top: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid #a8a8a8;

        .upcoming {
          width: 17.3vw;
          height: 20px;
          margin: 0 auto -10px;
          border-radius: 5px;
          font-size: 10px;
          line-height: 20px;
          text-align: center;
          color: #eee;
          background-color: #a7a7a7;
        }
      }

      .coming_movie {
        width: 100%;

        ul {
          padding-top: 18px;

          li {
            margin: 0 17px 17px;
            background-color: #f9f9f9;
            -webkit-box-shadow: 0.5px 0.5px 1px #a8a8a8;
            -moz-box-shadow: 0.5px 0.5px 1px #a8a8a8;
            box-shadow: 0.5px 0.5px 1px #a8a8a8;
            cursor: pointer;

            .com_movie {
              font-size: 0;
              position: relative;

              img {
                width: 100%;
              }

              .com_movie_img {
                width: 100%;

                .com_movie_title {
                  height: 50px;
                  width: 100%;
                  background-color: white;
                  font-size: 12px;

                  span {
                    line-height: 30px;
                  }

                  .com_title {
                    padding-top: 10px;
                    padding-left: 10px;
                    text-align: left;
                  }

                  .com_title_data {
                    text-align: left;
                    padding-left: 10px;

                    span {
                      color: #9a9a9a;
                    }
                  }
                }
              }

              .com_date {
                position: absolute;
                bottom: 0;
                right: 0;
                height: 50px;

                span {
                  line-height: 50px;
                  text-align: center;
                  color: #f78360;
                  font-size: 12px;
                  padding-right: 50px;
                }
              }
            }
          }
        }
      }
    }
  }
}
//

header {
  position: fixed;
  color: white;
  height: 50px;
  width: 100%;
  background-color: #282828;
  clear: both;
  top: 0;
  left: 0;
  z-index: 111;

  .nav_side_box {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    height: 100%;
    width: 100vw;
    top: 49px;
    left: 0;
    z-index: 111;
    transform-origin: left;

    &.is_on-enter {
      transform: scaleX(0);
    }

    &.is_on-enter-active {
      width: 0;
      //          transform: scaleX(0);
      transition: all 0.1s;
    }

    &.is_on-enter-to {
      width: 100vw;
      //          transform: scaleX(1);
    }

    &.is_on-leave {
      width: 100vw;
    }

    &.is_on-leave-active {
      transform: scaleX(1);
      transition: all 0.1s;
    }

    &.is_on-leave-to {
      transform: scaleX(0);
    }

    .nav_side {
      width: 71vw;
      height: 100%;
      border-top: 1px solid #222;
      box-shadow: 0 1px 1px #363636 inset;
      background: #282828;
      position: absolute;
      display: block;
      top: 0;
      bottom: 0;
      left: 0;

      ul {
        width: 71vw;

        li {
          line-height: 50px;
          height: 50px;
          display: block;
          width: 62vw;
          padding: 0 16px;
          border-bottom: 1px solid #333;
          text-align: left;

          a {
            color: white;
            color: #9a9a9a;
            font-size: 14px;
          }
        }
      }
    }
  }

  .nav_i {
    width: 13.3vw;
    height: 50px;
    position: relative;
    overflow: hidden;
    float: left;

    span {
      display: inline-block;
      height: 50px;
      line-height: 50px;
      text-align: center;

      i {
        color: white;
        opacity: 0.4;
        padding-left: 15px;
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 1px;
      height: 100%;
      background-color: white;
      opacity: 0.6;
    }
  }

  .nav_title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50vw;
    height: 100%;
    line-height: 50px;

    p {
      text-align: center;
      font-size: 14px;
      color: white;
    }
  }

  .nav_user {
    float: right;
    line-height: 50px;
    padding-right: 2vw;

    a {
      .address {
        display: inline-block;
        color: white;
        > span {
          color: white;
          display: inline-block;
          > i {
            font-size: 25px;
            color: white;
          }
        }
      }
    }

    span {
      i {
        color: white;
        font-size: 16x;
      }
    }
  }
}
//
